<template>
  <view class="wrap">
    <view class="bd dbox">
      <p class="titles">当前回复</p>
      <view class="s-list">
        <view
          class="s-item u-border-bottom"
          v-for="(v, index) in unread"
          :key="index"
        >
          <image :src="v.fromAvatar" mode="aspectFit" class="imgs"></image>
          <view class="content">
            <p class="name u-font-md u-line-1">
              <span style="font-weight: 600">{{ v.fromName }}</span>
            </p>
            <!-- 						<p :class="v.content.length>40?'context u-font-sm':'context u-font-sm m2'">{{ v.content }}</p>
						<p :class="v.origin.content.length>40?'message u-font-xs':'message mu-line-3 u-font-xs m2'" >{{v.origin.content}}</p> -->
            <p class="context u-font-sm u-line-2">{{ v.content }}</p>
            <p class="message u-font-xs u-line-2">{{ v.origin.content }}</p>
            <span style="font-size: 12px; color: #bcbcbc"
              >{{ v.date.substring(0, 10) }} <span class="u-m-l-10"></span>
            </span>
          </view>
        </view>
      </view>
    </view>

    <scroll-view scroll-y="true" :style="{ height: swiperHeight + 'px' }">
      <view class="scroll-view-height">
        <p class="titles">全部评论</p>
        <hb-comment
          ref="hbComment"
          @add="add"
          @del="del"
          @like="like"
          @addchild="addchild"
          :deleteTip="'确认删除？'"
          :cmData="commentData"
          v-if="commentData"
        ></hb-comment>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperHeight: "",
      page: {},
      unread: [],
      read: [],
      commentData: null,
      newlist: [],
      videoInfo: {},
      cont: "", //评论内容
      addchildConcent: {
        id: "",
        parentId: "",
        fromId: "",
        top: 1,
      },
      ownid: "", //当前用户id
      showdelete: false,
      content: "是否删除该评论?",
      isreader: "", //是否已读未读
    };
  },
  onLoad(option) {
    const item = JSON.parse(decodeURIComponent(option.obj));
    console.log(item);
    this.videoInfo = item.videoManage; //video参数信息
    this.isreader = item.isRead; //已读未读状态
    this.getVideoComment();
    // this.getUnRead()
    this.unread = [item];
  },
  onShow() {},
  onReachBottom() {
    console.log("触底了");
    if (this.page.isLastPage) return;
  },
  onReady: function (res) {
    var _this = this;
    uni.getSystemInfo({
      success: (resu) => {
        const query = uni.createSelectorQuery();
        //.scroll_y 是滚动区域，得到高度来计算剩余高度
        query.select(".scroll-view-height").boundingClientRect();
        query.exec(function (res) {
          _this.height = resu.windowHeight - res[0].top;
          console.log("打印页面的剩余高度", _this.height);
          _this.swiperHeight = _this.height;
        });
      },
      fail: (res) => {},
    });
  },
  methods: {
    //获取消息 默认unRead 未读    readed已读  解析当前评论
    getUnRead() {
      this.config
        .get("/projectionHall/getAllComment", {
          type: this.isreader == 0 ? "unRead" : "readed",
        })
        .then((res) => {
          console.log(res);
          this.unread = res.data.data;
        });
    },
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    showToast() {
      this.$refs.uToast.show({
        title: "评论成功",
        type: "success",
      });
    },
    showToastWarn() {
      this.$refs.uToastwarns.show({
        title: "当前评论有敏感词，请检查",
        type: "warning",
      });
    },
    del(id) {
      this.showdelete = true;
      this.ownid = id;
    },
    deleteDone(id) {
      this.config
        .get("/projectionHall/deleteComment", {
          id: this.ownid,
        })
        .then((res) => {
          console.log(res);
          setTimeout(() => {
            this.getVideoComment();
          }, 500);
        });
    },
    //子评论内容
    addchild(obj) {
      const { id, parentId, fromId, top } = obj;
      console.log(obj);
      this.addchildConcent.id = id;
      this.addchildConcent.parentId = parentId;
      this.addchildConcent.fromId = fromId;
      this.addchildConcent.top = top;
    },
    //评论接口
    add(obj) {
      const { content } = obj;
      this.cont = content;
      if (!this.addchildConcent.top == 0) {
        this.handAddConten(content);
      } else {
        this.childAddConten(content);
      }
    },
    //增加新评论
    handAddConten(content) {
      this.$refs.hbComment.closeInput(); //关闭输入框
      this.config
        .get("/projectionHall/doCommentMain", {
          voidId: this.videoInfo.id,
          content: content,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code != 200) {
            this.showToastWarn();
            return false;
          } else {
            this.showToast();
            this.$refs.hbComment.closeInput(); //关闭输入框
            setTimeout(() => {
              this.getVideoComment();
            }, 500);
          }
        });
    },
    //回复子评论
    childAddConten(content) {
      this.$refs.hbComment.closeInput(); //关闭输入框
      this.config
        .get("/projectionHall/doCommentPersonal", {
          voidId: this.videoInfo.id,
          content: content,
          commentId: this.addchildConcent.parentId || this.addchildConcent.id,
          fromId: this.addchildConcent.fromId,
          toPersonalId: this.addchildConcent.id,
        })
        .then((res) => {
          if (res.data.code != 200) {
            this.showToastWarn();
            return false;
          } else {
            this.showToast();
            this.$refs.hbComment.closeInput(); //关闭输入框
            setTimeout(() => {
              this.getVideoComment();
            }, 500);
          }
        });
    },
    //点赞接口
    like(cid) {
      this.$refs.hbComment.likeComplete(cid); //模拟点赞
      this.config
        .get("/projectionHall/giveThumbs", {
          commentId: cid,
        })
        .then((res) => {
          console.log(res);
        });
    },
    //获取评论
    getVideoComment() {
      this.config
        .get("/projectionHall/getCommentbyVideoId", {
          videoId: this.videoInfo.id,
        })
        .then((res) => {
          if (res.code != -1) {
            this.newlist = res.data.data;
            this.getPin();
          } else {
            this.newlist = [];
          }
        });
    },
    getPin() {
      this.commentData = {
        commentSize: this.newlist.length,
        comment: this.getTree(this.newlist),
      };
    },
    getTree(data) {
      let result = [];
      let map = {};
      data.forEach((item) => {
        map[item.id] = item;
      });
      data.forEach((item) => {
        let parent = map[item.parentId];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  overflow: hidden;
  background-color: white;
  padding-top: 396rpx;
}

.dbox {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
}

.tab_bar {
  width: 100%;
  position: fixed;
  z-index: 99;
}

.s-item {
  width: 100%;
  padding: 20rpx 15rpx;
  display: flex;
  align-items: flex-start;
  background-color: #fbfcfe;
  justify-content: space-between;

  .imgs {
    width: 80rpx;
    height: 80rpx;
  }

  .content {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 20rpx;
    line-height: 44rpx;

    .name {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 40rpx;
    }

    .context {
      font-weight: 400;
      margin: 30rpx 0;
    }

    .message {
      background-color: #f6f7f9;
      padding: 12rpx;
      color: #848484;
    }
    .m2 {
      height: auto !important;
    }
  }
}

.titles {
  padding: 30rpx;
  font-size: 32rpx;
  font-weight: bold;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  /* 	page{
		background-color: #1b1c1e !important;
	} */
  .bd {
    background-color: #1b1c1e !important;
  }

  .t1 {
    color: #ccc !important;
  }
}

@media (prefers-color-scheme: light) {
  page {
    background-color: #f7f7f7;
  }
}
</style>
